<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
        <el-form-item label="园所名称：" prop="schoolCode">
            <el-select v-model="queryParams.schoolCode" @change="selectSchool" clearable 
            @clear="getClear"
            filterable placeholder="请选择园所">
                          <el-option
                            v-for="item in schoolList"
                            :key="item.code"
                            :label="item.title"
                            :value="item.code">
                          </el-option>
                        </el-select>
         </el-form-item>
         <el-form-item label="年级：" prop="grade">
             <el-select v-model="queryParams.grade" placeholder="请选择年级" clearable size="small"  @change="getGradechange" :disabled="queryParams.schoolCode==''">
                 <el-option v-for="dict in gradeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
             </el-select>
          </el-form-item>
          <el-form-item>
              <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="charts"  >
            <div  ref="outTimeCharts" class="outTimeCharts"></div>
          </div>
    </div>
</template>
  
<script>
import { analysisList,analysisExport } from "@/api/qu/qyyerygk";
import { schoolList } from "@/api/qu/qyyerygk";
 export default {
   name: "hwqjsstj",
   data() {
     return {
         queryParams: {
             schoolCode:'',
             grade:'',
           },
        outTimeCharts:null,
        outTimeList:[
          {name:'全区',value:200,lv:188},
          {name:'园所1',value:200,lv:188},
          {name:'园所2',value:150,lv:188},
          {name:'园所3',value:250,lv:188},
      ], 
      schoolList:[],
     };
   },
   created() {
    this.getDicts("year_type").then(response => {
          this.gradeOptions = response.data;
        });
     this.getschoolList();
     this.getList();
   },
   mounted(){
     this.outTimeCharts = this.$echarts.init(this.$refs.outTimeCharts);
     this.schoolChartsFn();
   },
   methods: {
    async getList(){
         try {
         //  console.log(data);
         // this.chartsFun()
         } catch (error) {
           console.log(error);
         }
     },
     //获取学校列表
     async getschoolList(){
         const data = await schoolList();
         this.schoolList=data.rows;
        //  console.log('dd',data);
        },
     schoolChartsFn(){
       const option = {
      // backgroud:'#333',
      title: {
        text: '各园人均时长统计情况',
       //  subtext: '纯属虚构',
        left: 'left'
      },
      tooltip: {
           trigger: 'axis',
           axisPointer: {
           type: 'shadow'
           }
       },
       dataZoom:{
          bottom:0,
          show:12/this.outTimeList.length<1,
          // show:true,
          type:'slider',
          zoomLock:true,
          brushSelect:false,
          height:8,
          // backgroundColor:'#000000',
          handleSize:'0',
          // moveHandleSize:1,
          // moveHandleStyle:{
          //   borderType:'dotted'
          // },
          sow:true,
          xAxisIndex:[0],
          start:0,
          end:12/this.outTimeList.length*100
        },
        tooltip: {
              trigger: 'item',
              formatter: function (params) {
               return params.seriesName+'每日人均时长：'+params.value+' , 达标：'+params.data.age;
             },
          },
       legend: {
         selectedMode: 'multiple',
         top:0,
           left:'right',
       },
       grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
       },
       xAxis: [
           {
           type: 'category',
           axisLabel: {//x轴文字的配置
            show: true,
            rotate:0,
            interval: 0,//使x轴文字显示全
           },
           data: this.outTimeList.map(item=>item.name)
           }
       ],
       yAxis: [
           {
           type: 'value',
           name:'单位：分钟'
           }
       ],
       color:['#5ab1ef','#2ec7c9',],
       series: [
           {
               name: '每日人均时长',
               type: 'bar',
               // stack: 'Ad',
               barWidth:'30%',
               emphasis: {
                   focus: 'series'
               },
               label: {
                 show: true,
                 position: 'inside',
                 fontSize: 15
               },
               data: this.outTimeList
           },
           {
               name: '达标',
               type: 'bar',
               // stack: 'Ad',
               barWidth:'30%',
               emphasis: {
                   focus: 'series'
               },
               label: {
                 show: true,
                 position: 'inside',
                 fontSize: 15
               },
               data: this.outTimeList.map(item=>item.lv)
               
           },
       ]
       }
         // 使用刚指定的配置项和数据显示图表
         this.outTimeCharts.setOption(option,true);
         window.addEventListener("resize", this.monitorResize);
   },
      //地图监听窗口缩放事件
      monitorResize(){
       this.outTimeCharts.resize();
     },
   }
 };
</script>
<style lang="scss" scoped>
     .charts{
       width: 100%;
       height: 500px;
         .outTimeCharts{
             width:95%;
             height: 100%;
             margin-top: 50px;
         }
     }
</style>
